<template>
  <div class="data-statistics c6-container">
    <ContentForm>
      <div slot="searchform" class="form-top">
        <form action>
          <p class="form-top-p">
            <el-radio-group v-model="listQuery.yearQuarter" size="mini" @change="yearQuarterChange">
              <el-radio-button
                v-for="(item, index) in yearQuarterList"
                :key="index"
                :label="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
          </p>

          <p class="form-top-p">
            <el-select v-model="listQuery.deptId" clearable placeholder="请选择单位">
              <el-option
                v-for="item in depts"
                :key="item.unitDeptCode"
                :label="item.deptName"
                :value="item.unitDeptCode" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select
              v-model="listQuery.cType"
              clearable
              placeholder="请选择6c类型"
              @chang="cTypeChange">
              <el-option
                v-for="item in cTypeList"
                :key="item.itemValue"
                :label="item.itemName"
                :value="item.itemValue" />
            </el-select>
          </p>

          <p v-show="quarterFormVisible" class="form-top-p">
            <el-select v-model="listQuery.quarter" collapse-tags clearable placeholder="季度">
              <el-option
                v-for="item in quarterList"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-date-picker
              v-model="listQuery.year"
              placeholder="选择年份"
              format="yyyy"
              value-format="yyyy"
              type="year"
              style="width: 170px"
              class="filter-item"
              size="mini" />
          </p>
          <p class="form-top-p">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getlist">查询</el-button>
            <el-button type="primary" size="mini" icon="el-icon-refresh" @click="resetData">重置</el-button>
            <el-button type="primary" size="mini" @click="exportList">导出</el-button>
          </p>
        </form>
      </div>
      <div
        slot="valueform"
        class="tableContainer widthPage v-flex-elastic"
        style="height: calc(100%); overflow: auto">
        <div class="table_content">
          <div class="table_title">
            <img src="@/assets/images/userInspetionTitle.png" alt>
            {{ listQuery.cType }}检测计划执行情况统计
          </div>
          <div style="display: flex; height: calc(100% - 37px)">
            <el-table
              v-loading="loading"
              :data="tableData"
              :span-method="objectSpanMethod"
              highlight-current-row
              height="100%"
              style="flex: 1"
              border
              stripe>
              <el-table-column prop="deptName" label="单位" width="180" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.deptName }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="lineName"
                show-overflow-tooltip
                label="线路"
                width="180"
                align="center" />
              <el-table-column v-if="yearVisible" key="1" show-overflow-tooltip label="1季度" align="center">
                <el-table-column prop="quarterPlan1" label="计划次数" align="center">
                  <template slot-scope="scope">
                    <a
                      size="mini"
                      style="text-decoration: underline; cursor: pointer"
                      @click="quarterPlan1Detail(scope.row,this.listQuery)">{{ scope.row.quarterPlan1 }}</a>
                  </template>
                </el-table-column>
                <el-table-column prop="quarterComp1" label="完成次数" align="center" />
                <el-table-column prop="completeRate1" label="完成率" align="center" />
              </el-table-column>
              <el-table-column v-if="yearVisible" key="2" show-overflow-tooltip label="2季度" align="center">
                <el-table-column prop="quarterPlan2" label="计划次数" align="center" />
                <el-table-column prop="quarterComp2" label="完成次数" align="center" />
                <el-table-column prop="completeRate2" label="完成率" align="center" />
              </el-table-column>
              <el-table-column v-if="yearVisible" key="3" show-overflow-tooltip label="3季度" align="center">
                <el-table-column prop="quarterPlan3" label="计划次数" align="center" />
                <el-table-column prop="quarterComp3" label="完成次数" align="center" />
                <el-table-column prop="completeRate3" label="完成率" align="center" />
              </el-table-column>
              <el-table-column v-if="yearVisible" key="4" show-overflow-tooltip label="4季度" align="center">
                <el-table-column prop="quarterPlan4" label="计划次数" align="center" />
                <el-table-column prop="quarterComp4" label="完成次数" align="center" />
                <el-table-column prop="completeRate4" label="完成率" align="center" />
              </el-table-column>
              <el-table-column
                v-if="quarterVisible"
                show-overflow-tooltip
                :label="month1"
                align="center">
                <el-table-column prop="monthPlan1" label="计划次数" align="center">
                  <template slot-scope="scope">
                    <span>{{ scope.row.monthPlan1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="monthComp1" label="完成次数" align="center" />
                <el-table-column prop="completeRate1" label="完成率" align="center" />
              </el-table-column>
              <el-table-column
                v-if="quarterVisible"
                show-overflow-tooltip
                :label="month2"
                align="center">
                <el-table-column prop="monthPlan2" label="计划次数" align="center" />
                <el-table-column prop="monthComp2" label="完成次数" align="center" />
                <el-table-column prop="completeRate2" label="完成率" align="center" />
              </el-table-column>
              <el-table-column
                v-if="quarterVisible"
                show-overflow-tooltip
                :label="month3"
                align="center">
                <el-table-column prop="monthPlan3" label="计划次数" align="center" />
                <el-table-column prop="monthComp3" label="完成次数" align="center" />
                <el-table-column prop="completeRate3" label="完成率" align="center" />
              </el-table-column>
              <el-table-column prop="completeRate" label="完成率总计" align="center" />
            </el-table>
          </div>
        </div>
        <div v-for="(item, index) in barChart" :key="index" class="chat">
          <div class="title1">
            <img src="@/assets/images/userInspetionCharts.png" alt>
            {{ listQuery.cType }}{{ item.name }}完成率统计
          </div>
          <div :id="'main' + index" class="col-div" style="width: 100%; height: calc(100% - 50px)" />
        </div>
      </div>
    </ContentForm>
    <PlanExecutionStatisticsDetail
      v-if="PlanExecutionStatisticsDetailVisible"
      ref="PlanExecutionStatisticsDetail"
      :rail-type="this.listQuery.railType"
      :c-type="this.listQuery.cType"
      :year="this.listQuery.year" />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { downloadFile } from '@/utils/public'
import { listAll } from '@/api/cms/Inspection-management/Inspection-plan-management/DetailedPlanManagement'
import { findManageUnitDeptList, railtypeList } from '@/api/platform'
import PlanExecutionStatisticsDetail from './components/PlanExecutionStatisticsDetail'
import echarts from 'echarts'
import { getListByTypeCode } from '@/api/cms/basic'
import ContentForm from '@/components/ContentForm'
export default {
  name: 'PlanExecutionStatisticCopy',
  components: {
    PlanExecutionStatisticsDetail,
    ContentForm
  },
  data() {
    return {
      barChart: [],
      parseTime: parseTime,
      isActive: false, // 查看详情
      ishowtan: false, // 左侧小弹窗
      loading: false,
      tableData: [],
      tableItemData: [],
      chatOption: {
        legend: {},
        tooltip: {},
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataset: {
          source: [
            ['表头', '1季度', '2季度', '3季度', '4季度'],
            ['广珠城际联络', 43.3, 85.8, 93.7, 33],
            ['广珠动车走行A', 43.3, 85.8, 93.7, 33],
            ['广珠动车走行B', 83.1, 73.4, 55.1, 56, 33],
            ['广州北客专上联', 86.4, 65.2, 82.5, 33]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' },
          { type: 'bar' }
        ]
      },
      PlanExecutionStatisticsDetailVisible: false,
      yearVisible: true,
      quarterVisible: false,
      quarterFormVisible: false,
      yearFormVisible: false,
      cTypeName: '',
      month1: '',
      month2: '',
      month3: '',
      depts: [],
      railtypes: [],
      cTypeList: [
      ],
      yearQuarterList: [
        { label: '年份', value: 0 },
        { label: '季度', value: 1 }
      ],
      quarterList: [
        { label: '1季度', value: 1 },
        { label: '2季度', value: 2 },
        { label: '3季度', value: 3 },
        { label: '4季度', value: 4 }
      ],
      total: 0,
      listQuery: {
        unitDeptCode: '',
        cType: '1C',
        railType: '',
        yearQuarter: 0,
        quarter: '',
        year: new Date().getFullYear().toString(),
        page: 1,
        size: 20
      }
    }
  },
  watch: {},
  mounted() {
    this.initPage()
  },
  methods: {
    cTypeChange() {
      this.cTypeList.forEach((a) => {
        if (a.value === this.listQuery.cType) {
          this.cTypeName = a.label
        }
      })
    },
    yearQuarterChange() {
      this.yearFormVisible = true
      this.quarterFormVisible = false
      this.listQuery.year = null
      this.listQuery.quarter = 1
      if (this.listQuery.yearQuarter === 1) {
        this.yearFormVisible = false
        this.quarterFormVisible = true
      }
    },
    // 注意：横向合并列 纵向合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.count !== undefined && row.count > 0) {
          return { rowspan: row.count, colspan: 1 }
        } else {
          return { rowspan: 0, colspan: 0 }
        }
      } else if (columnIndex === 1) {
        if (row.colspan !== undefined && row.colspan === 2) {
          return { rowspan: 1, colspan: 2 }
        } else {
          return { rowspan: 1, colspan: 1 }
        }
      } else {
        return { rowspan: 1, colspan: 1 }
      }
    },
    initPage() {
      // 获取单位
      findManageUnitDeptList({}).then((response) => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        this.depts = Object.freeze(resData)
      })

      railtypeList().then((response) => {
        this.railtypes = response.data
      })

      getListByTypeCode({ typeCode: 'JCJCTYPE' }).then((response) => {
        this.cTypeList = response.data
      })

      this.getlist()
    },
    initChart() {
      console.log(this.barChart)
      console.log('quarter', this.listQuery.yearQuarter)
      if (this.listQuery.yearQuarter === 0) {
        this.barChart.forEach((item, index) => {
          const myChart = echarts.init(document.getElementById(`main${index}`))
          const xData = []
          const compCount1Arr = []
          const compCount2Arr = []
          const compCount3Arr = []
          const compCount4Arr = []
          item.list.forEach((r) => {
            xData.push(r.lineName)
            compCount1Arr.push(r.completeRate1.replace('%', ''))
            compCount2Arr.push(r.completeRate2.replace('%', ''))
            compCount3Arr.push(r.completeRate3.replace('%', ''))
            compCount4Arr.push(r.completeRate4.replace('%', ''))
          })
          const option = {
            xAxis: {
              type: 'category',
              data: xData,
              splitLine: {
                // 分割线配置
                show: false,
                lineStyle: {
                  color: '#CFE0EF'
                }
              },
              axisLabel: {
                // y轴文字的配置
                textStyle: {
                  color: '#606266',
                  margin: 15
                }
                // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
              },
              axisTick: {
                show: false
              },
              axisLine: {
                // y轴线的颜色以及宽度
                show: false,
                lineStyle: {
                  color: '#CFE0EF',
                  width: 1,
                  type: 'solid'
                }
              }
            },
            tooltip: {},
            legend: {
              data: ['1季度', '2季度', '3季度', '4季度'],
              right: '40',
              icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

              itemWidth: 10, // 设置宽度

              itemHeight: 10, // 设置高度

              itemGap: 20 // 设置间距
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
              },
              show: true,
              axisLine: {
                show: false // 不显示坐标轴轴线
              },
              axisTick: {
                show: false // 不显示坐标轴刻度
              }
            },
            series: [
              {
                data: compCount1Arr,
                type: 'bar',
                name: '1季度',
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#45EDBB' // 0% 处的颜色
                        },
                        {
                          offset: 0.6,
                          color: '#45EDBB' // 60% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#45EDBB' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: compCount2Arr,
                name: '2季度',
                barWidth: 8, // 柱图宽度
                type: 'bar',
                barGap: 1, // 关键属性
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#58F0E7' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#31BFFF' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: compCount3Arr,
                type: 'bar',
                name: '3季度',
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#F4D873' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#FFA031' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: compCount4Arr,
                type: 'bar',
                name: '4季度',
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#9DE8FF' // 0% 处的颜色
                        },

                        {
                          offset: 1,
                          color: '#738FF4' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              }
            ]
          }
          myChart.clear()
          myChart.setOption(option)
        })
      } else {
        this.barChart.forEach((item, index) => {
          const myChart = echarts.init(document.getElementById(`main${index}`))
          const xData = []
          const month1RateList = []
          const month2RateList = []
          const month3RateList = []
          item.list.forEach((r) => {
            xData.push(r.lineName)
            month1RateList.push(r.completeRate1.replace('%', ''))
            month2RateList.push(r.completeRate2.replace('%', ''))
            month3RateList.push(r.completeRate3.replace('%', ''))
          })
          const option = {
            xAxis: {
              type: 'category',
              data: xData,
              splitLine: {
                // 分割线配置
                show: false,
                lineStyle: {
                  color: '#CFE0EF'
                }
              },
              axisLabel: {
                // y轴文字的配置
                textStyle: {
                  color: '#606266',
                  margin: 15
                }
                // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
              },
              axisTick: {
                show: false
              },
              axisLine: {
                // y轴线的颜色以及宽度
                show: false,
                lineStyle: {
                  color: '#CFE0EF',
                  width: 1,
                  type: 'solid'
                }
              }
            },
            tooltip: {},
            legend: {
              data: [this.month1, this.month2, this.month3],
              right: '40',
              icon: 'circle', //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none

              itemWidth: 10, // 设置宽度

              itemHeight: 10, // 设置高度

              itemGap: 20 // 设置间距
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
              },
              show: true,
              axisLine: {
                show: false // 不显示坐标轴轴线
              },
              axisTick: {
                show: false // 不显示坐标轴刻度
              }
            },
            series: [
              {
                data: month1RateList,
                type: 'bar',
                name: this.month1,
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#45EDBB' // 0% 处的颜色
                        },
                        {
                          offset: 0.6,
                          color: '#45EDBB' // 60% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#45EDBB' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: month2RateList,
                name: this.month2,
                barWidth: 8, // 柱图宽度
                type: 'bar',
                barGap: 1, // 关键属性
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#58F0E7' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#31BFFF' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              },
              {
                data: month3RateList,
                type: 'bar',
                name: this.month3,
                barGap: 1, // 关键属性
                barWidth: 8, // 柱图宽度
                // 顶部数字展示pzr
                itemStyle: {
                  // 柱形图圆角，鼠标移上去效果
                  emphasis: {
                    barBorderRadius: [10, 10, 0, 0]
                  },

                  normal: {
                    // 柱形图圆角，初始化效果
                    barBorderRadius: [10, 10, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 0,
                          color: '#F4D873' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#FFA031' // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  }
                }
              }
            ]
          }
          myChart.clear()
          myChart.setOption(option)
        })
      }
    },

    quarterPlan1Detail(row, listQuery) {
      this.PlanExecutionStatisticsDetailVisible = true
      this.$nextTick(() => {
        this.$refs.PlanExecutionStatisticsDetail.initPage(row,)
      })
    },
    exportList() {
      var url = '/cms/planDetail/exportList?1=1'
      if (this.listQuery.deptId) {
        url += '&deptId=' + this.listQuery.deptId
      }
      if (this.listQuery.cType) {
        url += '&cType=' + this.listQuery.cType
      }
      if (this.listQuery.railType) {
        url += '&railType=' + this.listQuery.railType
      }
      if (this.listQuery.yearQuarter !== '') {
        url += '&yearQuarter=' + this.listQuery.yearQuarter
      }
      if (this.listQuery.quarter) {
        url += '&quarter=' + this.listQuery.quarter
      }
      if (this.listQuery.year) {
        url += '&year=' + this.listQuery.year
      }
      var fileName = '计划执行情况统计.xls'
      downloadFile({ url, fileName })
    },
    resetData() {
      this.listQuery = {
        deptId: '',
        cType: '1C',
        railType: '',
        yearQuarter: 0,
        quarter: '',
        year: new Date().getFullYear().toString(),
        page: 1,
        size: 20
      }
      this.getlist()
    },
    // 获取列表
    getlist() {
      var _that = this
      this.tableData = []
      this.loading = true
      if (this.listQuery.cType === '') {
        this.$alert('请选择6C类型', '提示', {
          confirmButtonText: '确定'
        })
        this.loading = false
        return null
      }
      listAll(this.listQuery)
        .then((res) => {
          _that.cTypeChange()
          _that.yearVisible = true
          _that.quarterVisible = false
          if (_that.listQuery.yearQuarter === 1) {
            _that.yearVisible = false
            _that.quarterVisible = true
            _that.month1 =
              1 + parseInt((_that.listQuery.quarter - 1) * 3) + '月'
            _that.month2 =
              2 + parseInt((_that.listQuery.quarter - 1) * 3) + '月'
            _that.month3 =
              3 + parseInt((_that.listQuery.quarter - 1) * 3) + '月'
          }
          _that.tableData = res.data.records
          _that.chatOption.dataset.source = res.data.chatData
          _that.barChart = res.data.barChart
          // this.chartDataSource = res.data.chatData
          this.$nextTick(() => {
            _that.initChart()
          })
          // 调用计算需要合并的行
          // this.getSpanArr3(this.tableData)
          _that.loading = false
        })
        .catch((_) => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-table__body-wrapper {
  height: auto !important;
}
.chat {
  height: 350px;
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
  border-radius: 6px;
  margin-bottom: 20px;
}
.chat .title1 {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  color: #0f2e68;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.data-statistics {
  background-color: #f1f4fb;
}
.table_content {
  background: #ffffff;
  box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}
.table_title {
  font-family: Source Han Sans CN;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 70px;
  /* identical to box height */
  height: 70px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f2e68;
}
.dialog-table {
  position: relative;
  width: 420px;
  height: 100%;
  overflow: hidden;
  border: 1px solid #ebeef5;
  box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.4s linear;
  background: #409eff;
  color: white;
  z-index: 10;
  .dialog-title {
    display: flex;
    align-items: center;
    height: 34px;
    line-height: 34px;
    text-align: left;
    padding: 0 10px 0 14px;
    i {
      flex: 1;
      font-size: 22px;
      text-align: right;
      cursor: pointer;
    }
  }
}

.dialogtan {
  width: 0;
  transition: all 0.4s linear;
}

.col-div {
  width: 100%;
  height: calc(100% - 42px);
  padding: 0 8px;
}

::v-deep .el-table_1_column_2 div {
  width: initial !important;
}
</style>
